<!-- 自定义弹窗 组件 -->
<template>
  <div>
     <el-dialog
        :model-value="modelValue"
        :title="title"
        :width="width"
        @update:model-value="handleUpdateModelValue"
        @closed="handleClosed"
      >
        <!-- 默认插槽，用于插入弹窗内容 -->
        <slot></slot>
        <!-- footer 插槽 -->
        <template #footer>
          <slot name="footer"></slot>
        </template>
      </el-dialog>
  </div>
 
</template>

<script setup lang="ts">
import { computed } from 'vue'
// 定义组件的 props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '提示'
  },
  width: {
    type: String,
    default: '500px'
  }
})

// 定义组件的 emits
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm'): void
  (e: 'cancel'): void
  (e: 'closed'): void
}>()

// 处理 modelValue 更新
const handleUpdateModelValue = (value: boolean) => {
  emit('update:modelValue', value)
}

// 处理确认事件
const handleConfirm = () => {
  emit('confirm')
}

// 处理取消事件
const handleCancel = () => {
  emit('update:modelValue', false)
  emit('cancel')
}

// 处理弹窗关闭事件
const handleClosed = () => {
  emit('closed')
}
</script>
<style scoped>

</style>